<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品搜索_莞工零食商城</title>
    <link rel="short icon" href="/static/user/images/guangong.ico">
    <link rel="stylesheet" href="/static/user/css/reset.css">
    <link rel="stylesheet" href="/static/user/css/common.css">
    <link rel="stylesheet" href="/static/user/css/cxls.css">
    <script src="/static/user/js/jquery-3.4.1.js"></script>
    <style>

        img{
            display: block;
            width: 100%;
            height: 100%;
        }
        header,footer{
            height: 100px;
            width: 100%;
            background-color: aqua;
        }
        .searchresult{
            width: 80%;
            margin: 20px auto;
        }
        .searchfalse{
            width: 100%;
            height: 350px;
            line-height: 350px;
            text-align: center;
            font-size: 20px;
            color: #a8a8a8;
        }
        .searchtrue{
            width: 100%;
        }
        .items{
            width: 100%;
        }
        .items-info{
            background-color: #ffffff;
            width: 232px;
            height: 342px;
            border: 1px solid #eee;
            box-sizing: border-box;
            font-size: 12px;
            display: inline-block;
            margin:0 7px 10px 0;
        }
        .items-info:hover{
            border-color: #eb0742;
        }
        .items-img{
            height: 230px;
            width: 230px;
            margin-bottom: 10px;
        }
        .items-price{
            width: 230px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            color: #eb0742;
            font-size: 14px;
            font-weight: bold;
        }
        .items-description{
            height: 35px;
            width: 230px;
            padding: 0 10px;
            box-sizing: border-box;
            margin: 10px 0;
            /* 多行文本溢出隐藏并省略号显示 */
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .items-salenum{
            color: #999999;
            padding: 0px 10px;
        }
        .items-salenum .salenum{
            color: #eb0742;
        }
    </style>
</head>
<body>
    <!-- 头部 -->
    {include file="common/header"}
    <!-- 搜索页面中部 -->

    <div class="searchresult">
        <!-- 如果搜索不到任何相关商品信息 -->
        {if $search==''}
        <div class="searchfalse">
            亲！很抱歉~  未能搜索到您想要的商品信息！请确认搜索关键字正误！
        </div>
       <!-- 如果搜索到相关商品 -->
        {else}
       <div class="searchtrue">
        <ul class="items">
            {volist name="search" id="s"}
            <li class="items-info">
                <a href="/user/index/getgoodsdetails?id={$s.id}">
                    <div class="items-img">
                        <img src="/static/admin/uploads/{$s.thumb}" alt="">
                    </div>
                    <div class="items-price">￥{$s.sale_price}元</div>
                    <div class="items-description">
                        {$s.goods_name}
                    </div>
                    <div class="items-salenum">
                        销量：<span class="salenum">{$s.sale_num}</span> 件
                    </div>
                </a>
            </li>
            {/volist}
        </ul>
       </div>
        {/if}
    </div>

    <!-- 尾部 -->
    {include file="common/footer"}
</body>
</html>